<template>
  <div>
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="160px" style="width: 100%">
        <el-carousel-item v-for="(item, index) in items" :key="index">
          <img :src="item.src" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 首页选项 -->
    <div
      style="
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
      "
    >
      <div v-for="(item, index) in items" :key="index">
        <div
          style="
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            border-radius: 20px;
          "
        >
          <v-img :src="item.src" alt="" style="width: 130px; height: 65px" />
          <div style="text-align: center; height: 40px; border-radius: 20px">
            <v-btn
              :to="item.to"
              color="deep-purple lighten-2"
              text
              style="width: 100%; height: 100%"
            >
              <p>{{ item.name }}</p></v-btn
            >
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: space-around">
      <el-card class="box-card" style="width: 40%">
        <div slot="header" class="clearfix">
          <span>推荐文章</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >查看全部</el-button
          >
        </div>
        <div class="block">
          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
      <el-card class="box-card" style="width: 40%">
        <div slot="header" class="clearfix">
          <span>Blog日志</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >查看详细</el-button
          >
        </div>
        <div class="block">
          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "AdminMain",
  data() {
    return {
      activities: [
        {
          content: "活动按期开始",
          timestamp: "2018-04-15",
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13",
        },
        {
          content: "创建成功",
          timestamp: "2018-04-11",
        },
      ],
      items: [
        {
          name: "个人中心",
          to: "/admin/initial/personal",
          src: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg",
        },
        {
          name: "首页管理",
          to: "/admin/initial/personal",
          src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg",
        },
        {
          name: "文章管理",
          to: "/admin/operation/article",
          src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg",
        },
        {
          name: "图片管理",
          to: "/admin/operation/image",
          src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg",
        },
        {
          name: "用户信息",
          to: "/admin/user/message",
          src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg",
        },
        {
          name: "用户管理",
          to: "/admin/user/actions",
          src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg",
        },
        {
          name: "随记管理",
          to: "/admin/operation/image",
          src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg",
        },
        {
          name: "笔记管理",
          to: "/admin/operation/Note",
          src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.box-card {
  width: 100%;
}

.el-card__body {
  padding: 0px !important;
}

.block {
  padding-bottom: 10px;
}
.el-card__body {
  padding: 10px !important;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>